<template>
  <el-dialog
    title="选择广告对应的主题"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="60%">
    <div class="mod-config">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" size="mini">
        <el-form-item>
          <el-input @change="getDataList()" v-model="dataForm.key" placeholder="搜索主题" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="my-themes">
        <div class="container">
          <ul class="theme-list">
            <template>
              <li class="theme-item" @click="selected()">
                <div class="thumb">
                  <div class="page" style="font-size: 20px;">
                  </div>
                  <div class="cover">
                    <!--<div class="toolbar">-->
                    <!--<el-tooltip  class="item" effect="dark" content="预览" placement="top-start">-->
                    <!--<i @click="view(item.id)" class="el-icon-edit"></i>-->
                    <!--</el-tooltip>-->
                    <!--</div>-->
                    <div class="preview" ><span>通用广告</span></div>
                  </div>
                </div>
                <div class="footer">
                  <div class="title">通用广告</div>
                </div>
              </li>
            </template>
            <template v-for="item in dataList">
              <li class="theme-item" @click="selected(item)">
                <div class="thumb">
                  <div class="page">
                    <Page class="content" :style="{width: item.canvasWidth + 'px', height: item.canvasHeight + 'px', transform: 'scale(' + 115 / item.canvasWidth + ',' + 164 / item.canvasHeight  +')'}" :elements="item.elements" type="see" />
                  </div>
                  <div class="cover">
                    <!--<div class="toolbar">-->
                      <!--<el-tooltip  class="item" effect="dark" content="预览" placement="top-start">-->
                        <!--<i @click="view(item.id)" class="el-icon-edit"></i>-->
                      <!--</el-tooltip>-->
                    <!--</div>-->
                    <div class="preview" ><span>{{item.title}}</span></div>
                  </div>
                </div>
                <div class="footer">
                  <div class="title">{{item.title}}</div>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>

      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!--弹窗, 发布-->
    </div>
  </el-dialog>
</template>

<style lang="less" scoped>
  .my-themes {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
  }

  .my-themes .container {
    /*width: 1024px;*/
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
  }

  .my-themes .theme-list {
    overflow: hidden;
  }

  .theme-item {
    width: 115px;
    height: 164px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
  }

  .theme-item .thumb .page {
    width: 100%;
    height: 164px;
  }
  .thumb {
    position: relative;
    .cover {
      display: none;
      position: absolute;
      background: #000;
      opacity: 0.5;
      width: 100%;
      height: 100%;
      top:0;
      .toolbar {
        color: #fff;
        text-align: right;
        cursor: pointer;
        padding: 10px;
        font-size: 18px;
        i {
          margin: 5px;
        }
      }
      .preview {
        text-align: center;
        margin-top:40px;
        span {
          /*border: 1px solid #fff;*/
          padding: 5px 10px;
          font-size: 16px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .thumb:hover {
    .cover {
      display: block;
    }
  }
  .theme-item .footer {
    height: 68px;
    padding: 0px;
    margin-top: -30px;
    background-color: rgba(255, 255, 255, 0.01);
    box-sizing: border-box;
    position: absolute;
  }

  .theme-item .footer > .title {
    color: #dedede;
    font-size: 12px;
    width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    white-space: nowrap;
    line-height: 22px;
    font-weight: 600;
    background: rgba(68, 74, 72, 0.63);
  }

  .theme-item .footer > .content {
    color: #83817b;
    margin-top: 12px;
    font-size: 14px;
    max-height: 40px;
    overflow: hidden;
    line-height: 1.2;
  }
  .footer .delete {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .theme-item.create {
    text-align: center;
  }

  .theme-item.create .create-area p {
    font-size: 20px;
    cursor: pointer;
    margin-top: 100px;
  }
  .content {
    transform-origin: left top;
    background-color: #fff;
    overflow: hidden;
    position: relative;
  }
</style>
<style>
  .el-dialog__body{
    padding: 5px 20px;
  }
</style>
<script>
  import Page from './../../../components/Page'
  export default {
    name: 'select-skin',
    data () {
      return {
        dataForm: {
          key: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: this.pageIndex === 1 ? 11 : 12,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        visible: false
      }
    },
    components: {
      Page
    },
    methods: {
      init () {
        this.visible = true
        this.getDataList()
      },
      view (id) {
        window.open('/#/view?type=skin&id=' + id)
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/skin/ad-select'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      selected (item) {
        this.$emit('done', item)
        this.visible = false
      }
    }
  }
</script>
